import { defineComponent, onMounted, reactive, onUnmounted } from 'vue'

import './index.less'

export default defineComponent({
  name: 'AttitudeIndicator',
  props: {
    yaw: {
      type: [Number, String]
    },
    pitch: {
      type: [Number, String]
    },
    roll: {
      type: [Number, String]
    }
  },
  setup(props) {
    const calibrations = ['N', 15, 30, 'NE', 60, 75, 'E', 105, 120, 'SE', 150, 165, 'S', 195, 210, 'SW', 240, 255, 'W', 285, 300, 'NW', 330, 345]
    let ctx = null
    const initEcharts = () => {
      const canvas = document.getElementById('calibration')
      let canvasHeight = 0; let canvaswidth = 0
      canvasHeight = canvas.height = parseFloat(getComputedStyle(canvas.parentElement).height)
      canvaswidth = canvas.width = parseFloat(getComputedStyle(canvas.parentElement).width)
      ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvaswidth, canvasHeight)
      ctx.translate(canvaswidth / 2, canvasHeight / 2)
      ctx.textAlign = 'center'
      ctx.font = '10px sans-serif'
      ctx.fillStyle = '#DBF3FE'
      ctx.save()
      for (const item of calibrations) {
        if (item != 'N') {
          ctx.rotate((360 / calibrations.length) * 2 * Math.PI / 360)
        }
        ctx.fillText(item, 0, -canvasHeight / 2 + 10)
      }
      ctx.restore()
      ctx.strokeStyle = '#FFF'
      ctx.lineWidth = 2
      const radius = canvasHeight / 2 * 0.77
      for (let i = 0; i < calibrations.length; i++) {
        let len = 5
        if (i % 3 == 0) {
          len = 10
        }
        const deg = (360 / calibrations.length) * i * Math.PI * 2 / 360
        const firstPoint = [-Math.sin(deg) * radius, Math.cos(deg) * radius]
        const secondPoint = [-Math.sin(deg) * (radius + len), Math.cos(deg) * (radius + len)]
        ctx.beginPath()
        ctx.moveTo(...secondPoint)
        ctx.lineTo(...firstPoint)
        ctx.stroke()
      }
    }
    const skyCalibration = reactive([])
    const landCalibration = reactive([])

    const setPitchingCalibration = () => {
      skyCalibration.length = 0
      landCalibration.length = 0
      const sky = document.querySelector('.pitching .sky')
      const skyHeight = parseFloat(getComputedStyle(sky).height)
      for (let i = 0; i < 9; i++) {
        skyCalibration.push((
          <div className={i % 2 == 1 ? 'long' : 'short'} style={`transform: translate(-50%,${(19 - i) * 0.1 * skyHeight / 2}px);`}>
            <div className='number'>{(i + 1) * 10}</div>
            <div className='striping'></div>
          </div>
        ))
        landCalibration.push((
          <div className={i % 2 == 1 ? 'long' : 'short'} style={`transform: translate(-50%,${(i + 1) * 0.1 * skyHeight / 2}px);`}>
            <div className='number'>{(i + 1) * 10}</div>
            <div className='striping'></div>
          </div>
        ))
      }
    }
    onMounted(() => {
      let fun
      initEcharts()
      setPitchingCalibration()
      window.addEventListener('resize', fun = () => {
        initEcharts()
        setPitchingCalibration()
      })
      onUnmounted(() => {
        window.removeEventListener('resize', fun)
      })
    })
    return () => (
      <div className='attitude-indicator'>
        <canvas id='calibration' style={`transform:rotate(${-props.yaw}deg)`}></canvas>
        <div className='pointer'></div>
        <div className='disc' style={`transform:  translate3d(-50%,-50%,0) rotate(${-(props.roll || 0).toFixed(2)}deg)`}>
          <img className='rolling' src={new URL('@/assets/bit-screen/schedule-mge/rolling_bg.png', import.meta.url).href} style={`transform: translate(-50%,-2px)`} />
          <div className='pitching' style={`transform: translate3d(-50%, -${50 - ((props.pitch || 0) / 4).toFixed(2)}%,0) `}>
            <div className='sky'>
              {skyCalibration}
            </div>
            <div className='land'>
              {landCalibration}
            </div>
          </div>
        </div>
      </div>
    )
  }
})
